#main {
	width: 100%;
	overflow: hidden;
}
.content {
	width: 1200px;
	margin: 0px auto;
}
#main .content .menu {
	width: 190px;
	height: 420px;
	float: left;
	padding-top: 10px;
}
#main .content .menu ul{
	font-size:14px;
	overflow: hidden;
}
#main .content .menu .category:nth-of-type(1){
	border-top:1px dashed gray;
	border-bottom:1px dashed gray;
	padding: 10px 5px;
}
#main .content .menu .category{
	border-bottom:1px dashed gray;
	padding: 10px 5px;
}
#main .content .menu .category h3{
	text-align: left;
}
#main .content .menu .category ul li{
	padding:10px 5px;
	width:50px;
	float:left;
}
#main .content .menu .category ul li a:hover{
	cursor: pointer;
	color:red;
}
#main .content .menu .category ul li.all a{
	color:red;
}

#main .content .display{
	float:right;
	margin:0 auto;
	height:auto;
	width: 1010px;
}
#main .content .display .books{
	margin-bottom: 10px;
}
.books ul {
	width: 100%;
	overflow: hidden;
	border-top: 1px #cccccc solid;
	border-right: 1px #cccccc solid;
}

.books ul li {
	position: relative;
	float: left;
	margin: 5px;
	width: 190px;
	height: 220px;
	overflow: hidden;
	text-align: center;
	border-left: 1px #cccccc solid;
	border-bottom: 1px #cccccc solid;
}

.books ul li img {
	display: block;
	transition: all ease 0.6s;
}

.books ul li:hover>img {
	transform: scale(1.1);
}

.books .box>div {
	width: 190px;
	height: 220px;
	overflow: hidden;
	background: rgba(0, 0, 0, 0);
	position: absolute;
	top: 0;
	transition: all ease 0.6s;
}
.books .box>div>a{
	width: 190px;
	height: 220px;
	position: absolute;
	left:0;
	top: 0;
}

.books .box:hover>div{
	background: rgba(0,0,0,0.3);
}
.books .box>div>a>h2{
	margin-top: 200px;
	color: #FFFFFF;
	text-align: center;
	opacity: 0;
	transition: all ease-in 0.6s;
}
.books .box:hover>div>a>h2{
	margin-top: 95px;
	opacity: 1;
}